<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>优选区1</title>
	<style>
	.jd_containerfloor{
		width: 80%;
		margin-left: 10%;
    	height: 305px;
    	border:1px solid black;
	}
	.box_top_grid_c2{
		width: 490px;
		height: 305px;
		border:1px solid black;
	}
	.box_hd {
    	height: 60px;
    	padding: 0 20px;
    	font-size: 0;
    	line-height: 0;
	}
	.box_hd_lk {
    	display: inline-block;
    	position: relative;
    	height: 32px;
    	margin: 12px 0 0;
	}
	.box_tit {
    	float: left;
    	font-weight: 700;
    	font-size: 24px;
    	color: #333;
    	line-height: 32px;
    	margin-top: 0px;
	}
	.box_hd_arrow {
    	background-image: url('1c590322ece537ba.png');
    	background-position: -16px 0;
    	width: 16px;
    	height: 16px;
    	position: relative;
    	float: left;
    	top: 9px;
    	left: 10px;
	}
	i:hover{
		background-image: url('4b49b55af25a7bdf.png');
	}
	.box_lightning-buy_grid_c2_box_last{
		height: 305px;
		width: 490px;
		float: right;
		border:1px solid black;
	}
	.box_hd {
    	height: 60px;
    	padding: 0 20px;
    	font-size: 0;
    	line-height: 0;
    	border:1px solid black;
	}
	.box_hd_lk {
    	display: inline-block;
    	position: relative;
    	height: 32px;
    	margin: 12px 0 0;
	}
	.box_bdr{
		border:1px solid black;
		height:240px;
		width: 100%;
	}
	.lightning-buy__container{
		padding-left: 10px;
		padding: 0 20px 0 15px;
		border:1px solid red;
		height: 100%;
	}
	.goods-others{
		border:1px solid blue;
		width: 230px;
		float: right;
		height: 305px;
		margin-top: -305px;
	}
	.other-item__logo{
		width: 116px;
    	height: 99px;
    	border:1px solid yellow;
	}
	.nice-goods{
		width: 80%;
		margin-left: 10%;
		height: 260px;
		border: 1px solid blueviolet;
		margin-top: 20px;
	}
	.nice-goods__logo{
		float: left;
	}
	</style>
	<style type="text/css">
	#box{
		width:888px;
		height:260px;
		border:1px solid black;
		position:relative;
		overflow:hidden;
	}
	#red{
		background-color:red;
		width:888px;
		height: 260px;
	}
	#green{
		background-color:green;
		width:888px;
		height: 260px;
	}
	#blue{
		background-color:blue;
		width:888px;
		height: 260px;
	}
	.slide{
		width:888px;
		height: 260px;
		position:absolute;
	}
</style>
<script type="text/javascript">
	onload=function(){
		var arr = document.getElementsByClassName("slide");
		for(var i=0;i<arr.length;i++){
			arr[i].style.left = i*888+"px";
		}
	}
	function LeftMove(){
		var arr = document.getElementsByClassName("slide");//获取三个子div
		for(var i=0;i<arr.length;i++){
			var left = parseFloat(arr[i].style.left);
			left-=2;
			var width = 888;//图片的宽度
			if(left<=-width){
				left=(arr.length-1)*width;//当图片完全走出显示框，拼接到末尾
				clearInterval(moveId);
			}
			arr[i].style.left = left+"px";
		}
	}
	function divInterval(){
		moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器
	}
	
	
	timeId=setInterval(divInterval,2000);//设置一个3秒的定时器。
	
	function stop(){
		clearInterval(timeId);
	}
	function start(){
		clearInterval(timeId);
		timeId=setInterval(divInterval,2000);
	}
	
	//页面失去焦点停止
	onblur = function(){
		stop();
	}
	//页面获取焦点时开始
	onfocus = function(){
		start();
	}
</script>
	</head>
	<body>
		<div class="jd_containerfloor" aria-label="特色优选一区" tabindex="0">
			<div class="box_lightning-buy_grid_c2_box_last">
				<div class="box_hd">
					<a class="box_hd_lk" href="http://www.baidu.com" target="_blank" clstag="h|keycount|core|spark_a">
						<h3 class="box_tit">品牌闪购</h3>
						<i class="box_hd_arrow"></i>
					</a>
				</div>
				<div class="box_bdr">
					<div class="lightning-buy__container">
						<a href="http://www.bilibili.com" class="goods-core goods-core__3">
							<img src="111.png"/>
						</a>
					</div>
					<div class="goods-others">
						<a href="http://www.baidu.com" target="_blank" class="other-item">
							<img src="1排.png" height="100px" width="230px"/>
						</a>
						<a href="http://news.baidu.com/" target="_blank" class="other-item">
							<img src="2排.png" height="100px" width="230px"/>
						</a>
						<a href="https://tieba.baidu.com/index.html" target="_blank" class="other-item">
							<img src="3排.png" height="100px" width="230px"/>
						</a>
					</div>
				</div>
			</div>
			<div class="box_top_grid_c2">
				<div class="box_hd">
					<a class="box_hd_lk" href="//top.jd.com" target="_blank" clstag="h|keycount|core|ranking_a">
						<h3 class="box_tit">排行榜</h3>
						<i class="box_hd_arrow"></i>
					</a>
				</div>
				<div class="box_bdl">
					
				</div>
			</div>
		</div>
		<div class="nice-goods">
			<a href="//fxhh.jd.com" target="_blank" class="nice-goods__logo">
				<img src="222.png"/>
			</a>
			<div id="box" onmouseover="stop()" onmouseout="start()">
			<div id="red" class="slide"></div>
			<div id="green" class="slide"></div>
			<div id="blue" class="slide"></div>
			</div>
		</div>
	</body>
</html>
